import React, {useEffect, useState} from 'react';
import {FormComponentProps} from 'antd/lib/form';
import Form from 'antd/es/form';
import {Col, Icon, Input, Modal, Row, Select} from 'antd';
import apis from '@/services';

interface Props extends FormComponentProps {
  data?: any;
  deviceId?: string;
  close: Function;
  save: (data: any) => void;
}

interface State {
    tagsbqData: any[];
    tagsbqlist:[];
}

const Tagsbq: React.FC<Props> = props => {
  const initState: State = {
    tagsbqData: props.data.length > 0 ? props.data : [{key: '', value: '', _id: 0}],
    tagsbqlist:[],
  };

  const [tagsbqData, setTagsbqData] = useState(initState.tagsbqData);
  const [tagsbqlist, setTagsbqlist] = useState(initState.tagsbqlist);
  useEffect(() => {
    setList();
  }, []);

  const saveData = () => {
    if (tagsbqData.length > 0) {
      props.save(tagsbqData);
    } else {
      props.close();
    }
  };
   const setList=()=>{
    apis.deviceProdcut.getLabelData().then((response: any) => {
        if (response.status === 200) {
            setTagsbqlist(response.result);
        }
    }).catch(() => {});
   }
  return (
    <Modal
      title='筛选条件11'
      visible
      okText="确定"
      cancelText="取消"
      onOk={() => {
        saveData();
      }}
      width="40%"
      onCancel={() => props.close()}
    >
      <span>设备标签：</span>
      <Form key='tagsbq_form'>
        <Form.Item key="tagsbq_item">
          {tagsbqData.map((item: any, index) => (
            <Row key={item._id}>
              <Col span={10}>
                  <Select placeholder="选择" value={tagsbqData[index].key}
                     onChange={(value: string,event:any) => {
                         tagsbqData[index].key = event.key;
                         setTagsbqData([...tagsbqData]);
                      }}
                >
                    {tagsbqlist?.map((item:any) => (
                    <Select.Option key={item.id}>{item.tagName}</Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={1} style={{textAlign: 'center'}}/>
              <Col span={10}>
                <Input placeholder="请输入标签value"
                       value={item.value}
                       onChange={event => {
                        tagsbqData[index].value = event.target.value;
                         setTagsbqData([...tagsbqData]);
                       }}
                />
              </Col>
              <Col span={2} style={{textAlign: 'center'}}>
                <Icon
                  type="minus-circle"
                  title="删除标签"
                  onClick={() => {
                    tagsbqData.splice(index, 1);
                    setTagsbqData([...tagsbqData]);
                  }}
                />
              </Col>
            </Row>
          ))}
          <Col span={24}>
            <a onClick={() => {
              setTagsbqData([...tagsbqData, {_id: Math.round(Math.random() * 100000)}]);
            }}>添加</a>
          </Col>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default Form.create<Props>()(Tagsbq);
